<!DOCTYPE html>
<!-- 通过 xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，
需要进行动态处理的元素,将使用“th:”前缀。 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员中心</title>

		<link rel="stylesheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css">
		<script src="webjars/jquery/3.6.0/jquery.js"></script>
		<script src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>

		<link rel="stylesheet" href="css/memberInfo.css">
		<link rel="stylesheet" href="css/nav.css">

	</head>


	<body>
		<div class="container">

			<!--菜单导航区域-->
			<div th:replace="nav :: nav"></div>
	
			<!--主体内容区域-->
            <div class="content">
				<!-- 左侧导航 -->
				<div class="member-left">
					<!-- 头像区域 -->
					<div class="member-left-photo">
						<div class="left">

						 <img th:if="${usernowInfo.photo !=null  && usernowInfo.photo !=''}" th:src="${usernowInfo.photo }" style="width: 90px;height:120px;">

						</div>
						<div class="right">
							<h4>  [[ ${usernowInfo.userName } ]]	</h4>
							<ul>
								<li>收藏夹<br> [[ ${memberInfoList[0].size() } ]] </li>
								<li>电子书<br> [[ ${memberInfoList[1].size() } ]] </li>
								<li>阅读记录<br> [[ ${memberInfoList[2].size() } ]] </li>
							</ul>
						</div>
					</div>
					<!-- 导航区域 -->
					<div class="member-left-nav">
						<div class="list-group">
							<a th:href="@{/toMemberInfo(pageNav=1) }" class="list-group-item  nav-item" target="contentPage">我的个人中心</a>
							<a th:href="@{/toMemberInfo(pageNav=2) }" class="list-group-item  nav-item" target="contentPage">上传的电子书</a>
							<a th:href="@{/toMemberInfo(pageNav=3) }" class="list-group-item  nav-item" target="contentPage">收藏的电子书</a>
							<a th:href="@{/toMemberInfo(pageNav=4) }" class="list-group-item  nav-item" target="contentPage">我的阅读记录</a>
							<a th:href="@{/logout  }" class="list-group-item  nav-item" >退出会员中心</a>
						</div>
					</div>
				</div>
				
				<!-- 右侧信息展示 -->
				<div class="member-right">

					<iframe th:if="${flag==null }" th:src='@{/toMemberInfo(pageNav=1) }' name="contentPage" width="100%" height="100%" frameborder="0" ></iframe>

					<iframe th:if="${flag !=null }" th:src='@{/toMemberInfo(pageNav=${flag}) }' name="contentPage" width="100%" height="100%" frameborder="0" ></iframe>

				</div>
			</div>


			<!--页尾 版本声明区域-->
			<div class="footer">
				<p>
					关于我们 | 网址帮助 | 广告服务 | 版权声明 | 友情连接 | 网站地图
				</p>
				<p>
					Copyright &copy; www.huhua.com All Rights Revered 页面版权所有 时光小说下载网 ICP备 187***64号 
				</p>
				<p>
					本站所收录的完整电子版和小说及评论都是会员的个人上传行为,如侵犯了您的权益,请将相关详细通知我们,我们将立即处理!
				</p>
			</div>
		</div>
	</body>
</html>

<script>
	$(function(){
		$(".login-register-nav li").click(function(){
			//先将所有的active激活样式删除，仅给当前事件激活
		    $(".login-register-nav li").removeClass("active");
			$(this).addClass("active")
		})
	})
	
</script>